<template>
	<view class="body">
		<!-- 表单 -->
		<view class="form">
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="意向城市" required>
					<pickerAddress :address-value="addressId" @change="change">{{baseFormData.address}}</pickerAddress>
				</uni-forms-item>
				<uni-forms-item label="您的姓名" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入你的名字" />
				</uni-forms-item>
				<uni-forms-item label="您的电话" required>
					<uni-easyinput v-model="baseFormData.phone" placeholder="请输入你的电话" />
				</uni-forms-item>
				<uni-forms-item label="留言建议">
					<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="这里可以留下您宝贵的建议~" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- 提示 -->
		<view class="tips">
			<view>*提交表单申请，工作人员将在三个工作日内与您电话联系。</view>
			<view>*如需即时了解，请直接联系客服，客服人员将在第一时间解答。</view>
		</view>
		<!-- 按钮 -->
		<view class="btn">
			<button class="phone" @click="customerClick">联系客服</button>
			<button class="apply" @click="submit('baseForm')">提交申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					address: '请选择意向城市',
					name: '',
					phone: '',
					introduction: '',
				},
				addressId: {},
				phoneNumber: '',
			}
		},
		onLoad() {

		},
		methods: {
			change(data) {
				this.addressId.provinceId = data.provinceId
				this.addressId.cityId = data.cityId
				this.addressId.areaId = data.areaId
				// join()数组转变为字符串，用括号内的符号分割
				this.baseFormData.address = data.data.join(' ')
			},
			customerClick(){
				uni.navigateTo({
					url: '/pages/kefu/kefu'
				})
			},
			submit() {
				let _this = this
				let reg = /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
				if (_this.baseFormData.address == '请选择意向城市') {
					_this.toast('未选择意向城市')
					return false
				}
				if (_this.baseFormData.name == '') {
					_this.toast('未填写姓名')
					return false
				}
				if (_this.baseFormData.phone == '' || !reg.test(_this.baseFormData.phone)) {
					_this.toast('未填写电话或电话格式不正确')
					return false
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				_this.$api.post('meet.join/submit', {
					province_id: _this.addressId.provinceId,
					city_id: _this.addressId.cityId,
					area_id: _this.addressId.areaId,
					name: _this.baseFormData.name,
					mobile: _this.baseFormData.phone,
					remark: _this.baseFormData.introduction,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.toast('提交成功')
					} else {
						_this.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: calc(100vw - 64rpx);
		background-color: #FFFFFF !important;
		padding: 32rpx 32rpx 0 32rpx;
	}

	/* 表单 */
	.uni-forms-item {
		margin-bottom: 24rpx !important;
		position: relative;
	}

	.uni-forms-item__error {
		padding: 0 !important;
	}

	.uni-forms-item__label {
		width: 28% !important;
		font-size: 32rpx !important;
		font-weight: bold !important;
		color: #333333 !important;
	}

	.uni-easyinput,
	.uni-select {
		background: #F5F5F5 !important;
		border-radius: 24rpx !important;
	}

	.is-input-border,
	.uni-select {
		border: none !important;
	}

	.uni-select {
		height: 88rpx !important;
		padding: 0 !important;
	}

	.uni-easyinput__content-input,
	.uni-select__input-box {
		height: 36rpx !important;
		padding: 26rpx 32rpx !important;
	}
	
	.uni-easyinput__content{
		background-color: #F5F5F5 !important;
	}

	.uni-easyinput__content-textarea {
		height: 88rpx !important;
		min-height: 88rpx !important;
		padding: 26rpx 32rpx !important;
	}

	picker {
		background-color: #F5F5F5;
		padding: 26rpx 32rpx !important;
		border-radius: 24rpx !important;
	}

	.uni-icons {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
	}

	/* 提示 */
	.tips {
		margin: 8rpx 0 100rpx 0;
		font-size: 24rpx;
		color: #999999;
	}

	/* 按钮 */
	.btn button {
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
	}

	.btn button::after {
		border: none;
	}

	.phone {
		background: #1AAD19;
	}

	.apply {
		background: #000000;
		margin-top: 40rpx;
	}
</style>